<template>
  <div class="quick-navigation-list flex flex-wrap gap-x-4" v-if="quickFilterOpts.dataList.length">
    <div
      :class="[{ active: activeNavigation === navigation.prop }, 'quick-navigation-item']"
      :style="{ '--color-bg-theme': navigation.theme, ...navigation.customStyle }"
      v-for="(navigation, index) in quickFilterOpts.dataList"
      :key="navigation.label"
      @click="navigationClickFn(navigation)"
    >
      <!-- 自定义内容 -->
      <div v-if="navigation.slotName">
        <slot :name="navigation.slotName" v-bind="{ navigation, index }"></slot>
      </div>
      <template v-else>
        <div class="quick-navigation-item-label flex items-center">
          {{ navigation.label }}
          <SvgIcon v-if="navigation.icon" :name="navigation.icon" class="navigation-icon" />
          <!-- 标题tooltip -->
          <a-tooltip v-if="navigation.tooltip" :content="navigation.tooltip">
            <icon-question-circle class="navigation-icon" />
          </a-tooltip>
        </div>
        <div class="quick-navigation-item-value">{{ navigation.num }} {{ navigation.unit }}</div>
        <div
          v-show="activeNavigation === navigation.prop"
          class="active-border w-full absolute left-0 bottom-0"
          :style="{ '--color-active-theme': navigation.activeColor }"
        ></div>
      </template>
    </div>
  </div>
</template>
<script setup lang="ts">
  /**
   * @description 快捷导航组件
   * @param {Object} quickFilterOpts 快捷导航配置
   * @param {String} defaultValue 默认选中的导航
   * @event {Function} change 快捷导航选中事件
   * @expose {Function} reset 重置函数
   * @expose {Function} clickActive 选中函数
   * @example  <list-quick-filter defaultValue="totalCount" :quickFilterOpts="quickFilterOpts" ref="listQuickNavigationRef" @change="quickFilterChange"
   * @example  import { uselistQuickFilter } from '@/hooks/uselistQuickFilter'
   * @example const quickFilterOpts = uselistQuickFilter({
      dataList: [
        {
          label: '未发起同步',
          theme: '#fab855ff',
          prop: 'unSyncCount',
          num: 0,
          activeColor: '#f79a29ff',
          params: { hrhcSyncStatusList: [0] }, // 点击切换时需要传递的参数
        },
      ],
    })
   * @example  const getQuickListSumFn = () => {
      api().then(({ result }) => {
        if (result) {
          quickFilterOpts.dataList.forEach((navigation) => {
            let prop = navigation.prop
            if (prop) {
              navigation.num = result[prop] || 0
            }
          })
        }
      })
    }
    />
   */
  import { ref } from 'vue'
  const emit = defineEmits(['change'])
  const props = defineProps({
    quickFilterOpts: {
      type: Object,
      default: () => {},
    },
    defaultValue: String,
  })
  // 快捷导航选中
  const activeNavigation = ref(props.defaultValue)
  const navigationClickFn = ({ params = {}, prop = '' }) => {
    activeNavigation.value = prop
    if (!Object.keys(params).length) {
      props.quickFilterOpts.dataList.forEach((item: any) => {
        if (item.prop === prop) params = item.params
      })
    }
    emit('change', params)
  }
  // 重置函数
  const reset = () => {
    activeNavigation.value = props.defaultValue
  }
  // 选中函数
  const clickActive = ({ prop = '' }) => {
    navigationClickFn({ prop })
  }
  defineExpose({
    reset,
    clickActive,
  })
</script>
<style lang="less" scoped>
  .quick-navigation-list {
    .quick-navigation-item {
      width: 148px;
      border-radius: 2px;
      padding: 9px 16px;
      margin-bottom: 20px;
      cursor: pointer;
      background-color: var(--color-bg-theme);
      color: #fff;
      position: relative;
      font-size: 12px;
      &:hover {
        transform: scale(1.1);
        transition: transform 0.3s;
        z-index: 1;
      }
      &-value {
        font-size: 20px;
        font-weight: 600;
      }
    }
    .active {
      box-shadow: 0 4px 5px rgb(5 19 56 / 20%);
    }
    .active-border {
      background-color: var(--color-active-theme);
      height: 6px;
      border-radius: 0 0 2px 2px;
    }
    .navigation-icon {
      width: 14px;
      height: 14px;
      margin-left: 5px;
    }
  }
</style>
